<!-- home -->
<template>
  <div class="index-page">
    <ul class="gameTab father">
          <li
            :class="isRotate ? 'rotate' : ''"
            v-for="img in imgs"
            :key="img.id"
            @click="flip(img)"  
            ref="card"
          >
            <img :src="img.img" class="card front"  ref="cardz" />    <!-- 卡片正面图片  -->
            <div class="card back" ref="cardf"></div>         <!-- 卡片背面背景  -->
          </li>
        </ul>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      ids: [],
      isStar: true,
      imgs: [
        {
          id: 1,
          img: require("@/assets/images/男1 copy 1.png"),
          is_sign: 1,
        },
        {
          id: 2,
          img: require("@/assets/images/男1 copy 2.png"),
          is_sign: 2,
        },
        {
          id: 3,
          img: require("@/assets/images/男1 copy 3.png"),
          is_sign: 3,
        },
        {
          id: 4,
          img: require("@/assets/images/男1 copy 4.png"),
          is_sign: 4,
        },
        {
          id: 5,
          img: require("@/assets/images/男1 copy 5.png"),
          is_sign: 5,
        },
        {
          id: 6,
          img: require("@/assets/images/男1 copy 6.png"),
          is_sign: 6,
        },
        {
          id: 7,
          img: require("@/assets/images/男1 copy 7.png"),
          is_sign: 7,
        },
        {
          id: 8,
          img: require("@/assets/images/男1 copy 8.png"),
          is_sign: 8,
        },
        {
          id: 9,
          img: require("@/assets/images/男1 copy 9.png"),
          is_sign: 9,
        },
        {
          id: 10,
          img: require("@/assets/images/男1 copy 10.png"),
          is_sign: 10,
        },
        {
          id: 11,
          img: require("@/assets/images/女1 copy 1.png"),
          is_sign: 1,
        },
        {
          id: 12,
          img: require("@/assets/images/女1 copy 2.png"),
          is_sign: 2,
        },
        {
          id: 13,
          img: require("@/assets/images/女1 copy 3.png"),
          is_sign: 3,
        },
        {
          id: 14,
          img: require("@/assets/images/女1 copy 4.png"),
          is_sign: 4,
        },
        {
          id: 15,
          img: require("@/assets/images/女1 copy 5.png"),
          is_sign: 5,
        },
        {
          id: 16,
          img: require("@/assets/images/女1 copy 6.png"),
          is_sign: 6,
        },
        {
          id: 17,
          img: require("@/assets/images/女1 copy 7.png"),
          is_sign: 7,
        },
        {
          id: 18,
          img: require("@/assets/images/女1 copy 8.png"),
          is_sign: 8,
        },
        {
          id: 19,
          img: require("@/assets/images/女1 copy 9.png"),
          is_sign: 9,
        },
        {
          id: 20,
          img: require("@/assets/images/女1 copy 10.png"),
          is_sign: 10,
        },
      ],
    }
  },
  computed: {},

  mounted() {
    this.randomRender()
  },

  methods: {
    // 随机图片位置
    randomRender() {
      let imgs = this.imgs,
        results = [];
      results = imgs.sort(() => {
        return Math.random() > 0.5 ? -1 : 1;
      });
      this.imgs = results;
    },
    // 点击翻牌
    flip(img) {
        // 判断是否点击开始游戏
      if (this.isStar) {
        // 初始在data中定义空数组 ids；
        // 判断是否连续点击相同的牌 不同时添加到数组中
        if (img !== this.ids[0]) {
          // 翻转卡片
          this.$refs.cardz[img.id - 1].style.transform = "rotateY(0)";
          this.$refs.cardf[img.id - 1].style.transform = "rotateY(180deg)";
          this.ids.push(img);
        }
       // 当已经存进两张卡片时，去判断两张是否配对，如配对成功就将两张卡片消失，并记录一次
        if (this.ids.length == 2) {
          if (this.ids[0].is_sign === this.ids[1].is_sign) {
            for (let i = 0; i < this.ids.length; i++) {
              this.$refs.card[this.ids[i].id - 1].className = "rotate";
            }
            this.ids.splice(0, 2);
            // 配对成功记录一次  当success = 10 时 挑战成功
            this.success++;
            if (this.success == 10) {
              clearInterval(this.timer);
              // 游戏成功 关闭计时器 展示成功弹窗
            }
          }
        } else if (this.ids.length > 2) {
       // 若前两张未配对成功 当翻开三张牌时 让前两张翻过去 并将数组中这俩卡片数据删除
          let x = this.ids.find((value, index, arr) => {
            if (index < 2) {
              return arr[index] == img;
            }
          });
          if (x == undefined) {
            for (let i = 0; i < this.ids.length - 1; i++) {
              this.$refs.cardz[this.ids[i].id - 1].style.transform =
                "rotateY(180deg)";
              this.$refs.cardf[this.ids[i].id - 1].style.transform =
                "rotateY(0)";
            }
            this.ids.splice(0, 2);
          } else {
            this.ids.splice(this.ids.length - 1, 1);
          }
        }
      } else {
        this.$toast("请点击开始游戏");
      }
   }
  }
}
</script>
<style lang="scss" scoped>
@keyframes vanish {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(0);
    opacity: 0;
  }
}
.gameTab {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 95%;
  margin: 20px auto 20px auto;
  .rotate {
    animation: vanish 0.5s forwards;
  }
  li {
    width: 24%;
    height: 150px;
    margin: 2px;
    position: relative;
    cursor: pointer;
    perspective: 800px;
    .card {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: #fff;
      line-height: 130px;
      text-align: center;
      cursor: pointer;
      transition: 0.3s ease-in-out;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .front {
      background-color: #3949c0;
      z-index: 2;
      transform: rotateY(-180deg);
    }
    .back {
      background: url('../../assets/images/peidui.png') no-repeat;
      background-size: 100% 100%;
      z-index: 1;
      transform: rotateY(0);
    }
  }
}
</style>
